<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="viewport" content="height=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" th:href="@{/mobile/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/mobile/css/register.css}"/>
    <link rel="stylesheet" th:href="@{/mobile/layui/css/layui.css}"/>
    <style>
        .message{
            background: none;
            padding-top: 10%;
        }
        .message input {
            width: 83%;
            margin: 0 4%;
        }
        .content form input:not(:nth-child(6)) {
            border: 0;
            margin-bottom: 8%;
        }
        .message .icons b{
            top: 14.5%;
            left: 11%;
        }
        .message .icons b:nth-child(2){
            top: 37%;
            left: 10%;
        }
        .message .icons b:nth-child(3){
            top: 60%;
        }
        .message .icons b:nth-child(4){
            top: 82%;
        }
        .code{
            top: 33.475%;
            right: 7.5%;
            background: #21a9f5;
            color: #ffffff;
            padding: 3.635% 5%;
        }
    </style>
</head>
<body>
    <div class="register">
        <div class="regTop">
            <span>忘记密码</span>
            <a class="back" href="mlogin.html">&lt;&nbsp;返回</a>
        </div>
        <div class="content">
            <form id="resetPassword">
                <div class="message">
                    <input type="tel" placeholder="输入手机号" id="phoneNumber" name="phoneNum" pattern="[0-9]{11}" required/>
                    <input type="text" placeholder="输入验证码" name="code" pattern="[0-9]{6}" required/>
                    <input type="password" id="newpass" name="newPass" placeholder="请输入新密码" pattern="[0-9A-Za-z]{6,25}" required/>
                    <input type="password" id="renewpass" name="reNewPass" placeholder="请再次确认密码" onblur="checkPassAndRepass()" pattern="[0-9A-Za-z]{6,25}" required/>
                    <div class="icons">
                        <b><img th:src="@{/mobile/images/zc-1.jpg}" alt=""/></b>
                        <b><img th:src="@{/mobile/images/zc-2.jpg}" alt=""/></b>
                        <b><img th:src="@{/mobile/images/zc-3.jpg}" alt=""/></b>
                        <b><img th:src="@{/mobile/images/zc-3.jpg}" alt=""/></b>
                    </div>
                    <a class="code" href="javascript:void(0)" onclick="sendVerification()" required>获取验证码</a>
                </div>
            </form>
            <button class="submit" onclick="resetPwd()">提交</button>
        </div>
    </div>
    <script th:src="@{/mobile/js/jquery.min.js}"></script>
    <script th:src="@{/mobile/layui/layui.js}"></script>
    <script th:inline="javascript">
        var url = [[@{/}]];
            layui.use("layer", function () {
                var layer = layui.layer;
            });
    </script>
    <script>
        //发送短信验证码
        function sendVerification() {
            var phoneNumber = $("#phoneNumber").val();
            if (!(/^1[3456789]\d{9}$/.test(phoneNumber))) {
                layer.msg("请输入正确的电话号码", {icon: 5});
                return;
            }
            $.ajax({
                url: url + "user/sendVerification",
                data: "phoneNumber=" + phoneNumber,
                success: function (result) {
                    layer.msg(result.msg);
                }
            })

        }
        function checkPassAndRepass() {
            var pass1=$("#newpass").val();
            var pass2=$("#renewpass").val();
            if (pass1!=pass2){
                layer.msg("两次输入不一致!", {icon: 5});
                $("#newpass").val("");
                $("#renewpass").val("");
            }
        }
    </script>
    <script>
        function resetPwd() {
            var param = $("#resetPassword").serialize();
            $.post(url+"user/forgetPass",param,function (result) {
                if (result.code == 200) {
                    setTimeout(function(){
                        window.location.href = "mlogin.html";
                    },2000);
                }
                layer.msg(result.msg, {icon: 6});
            })
        }
    </script>
</body>
</html>